<template>
  <view class="topBar" :style="{ paddingTop: menuButton.top + 'px' }">
    <view
      class="header"
      :style="{
        height: menuButton.height + 'px',
        paddingRight: menuButton.height + 'px'
      }"
    >
      <view class="backWrapper">
        <view class="back" v-if="displayBackIcon" @tap="backToPre">
					<u-icon name="arrow-left" color="#ffffff" size="32rpx"></u-icon>
        </view>
      </view>
      <view class="title">
        {{ title }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onReady } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { onMounted } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '输入标题'
  },
  displayBackIcon: {
    type: Boolean,
    default: true
  },
	noBack: {
	  type: Boolean,
	  default: false
	},
})

let menuButton = ref<{ height: Number; top: Number }>({ height: 0, top: 0 })

const emits = defineEmits(['navigateBack'])

onReady(() => {
  const { height, top } = uni.getMenuButtonBoundingClientRect()
  menuButton.value = { height, top }
})

const backToPre = () => {
	if(props.noBack){
		emits('navigateBack')
	} else {
		uni.navigateBack()
	}
}
</script>

<style scoped lang="scss">
.topBar {
  $fontSize: 32rpx;
  $iconSize: calc($fontSize + 4rpx);

  width: 100%;
  padding-bottom: calc($fontSize / 2);

  .header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .backWrapper {
      height: 100%;
      aspect-ratio: 1 / 1;
    }

    .back {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .title {
      margin: 0 auto;
      font-size: $fontSize;
      color: #ffffff;
    }
  }
}
</style>
